import { createRouter, createWebHashHistory } from 'vue-router';
import { isLogin } from '@/utils/tools.js'

// 创建路由对象：完成整个项目的路由管理（如：路由配置，路由跳转，路由模式，路由守卫的相关函数）

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: "/Login"
    },
    {
      name: "Login",
      path: "/Login",
      component: () => import("../views/Login.vue"),
      meta: {
        requireAuth: "no"
      }
    },
    {
      name: "Admin",
      path: "/Admin",
      component: () => import("../views/Layout.vue"),
      children: []
    }
  ]
})

console.log("router", router);

// 一、全局路由守卫：整个项目中所有的路由跳转（路径发生变化），都会经历全局路由守卫
// 1、前置钩子函数：地址栏路径发生变化后，进行路由匹配之前。
router.beforeEach((to, from, next) => {
  console.log("前置");

  // to: 要去的路由对象（跟$route是同类型的对象）
  // from：从哪里来（当前路由对象）（跟$route是同类型的对象）
  console.log("to", to);
  console.log("from", from);

  // 非登录页面都需要守卫。
  // if( to.path !== "/Login" ){
  if (to.meta.requireAuth != "no") {
    // if(没有登录过){
    if (!isLogin()) {
      next("/Login");
    } else {
      next(true);
    }
  }
  next();
})



// 2、路由守卫后置钩子函数：确定了要去的路径（并匹配到合适的组件）后，先调用该钩子函数，再创建组件
router.afterEach((to, from) => {
  console.log("后置");
  console.log("to", to);
  console.log("from", from);
  // 可以发送请求，把数据保存在vuex或者pinia里，然后，在组件里从vuex或者pinia里获取。这样的话，请求的更早
})


export default router;
